<template>
    <ScrollEl
        class="report-container">
        <div class="content-container">
            <div class="top-container">
                <el-form 
                    :model="queryParams" 
                    ref="queryForm" 
                    :inline="true">
                    <el-form-item label="报告编号">
                        <el-input
                            v-model="queryParams.reportNo"
                            placeholder="请输入"
                            clearable
                            @keyup.enter.native="getDataList"/>
                    </el-form-item>
                    <el-form-item label="报告名称">
                        <el-input
                            v-model="queryParams.reportTitle"
                            placeholder="请输入"
                            clearable
                            @keyup.enter.native="getDataList"/>
                    </el-form-item>
                    <!-- <el-form-item label="查询时间">
                        <el-date-picker
                            v-model="other.t"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button 
                            type="primary" icon="el-icon-search"
                            style="background: #1E36D4;border-color:#1E36D4;"
                            @click="getDataList">
                            搜索
                        </el-button>
                    </el-form-item>
                </el-form>
                <UploadReport
                    class="upload"
                    :typeOptions="[
                        {
                            value: '1',
                            label: '油气田水分析报告',
                        },
                        {
                            value: '3',
                            label: '水中氢、氧同位素分析报告',
                        },
                        {
                            value: '2',
                            label: '天然气组成分析报告',
                        },
                        {
                            value: '4',
                            label: '天然气组份碳氢氧同位素分析报告',
                        },
                    ]"
                    @onUpload="onUpload">
                </UploadReport>
            </div>
            <MyTabsSlot
                class="type-list"
                :activeIndex="activeType">
                <div 
                    :class="{
                        'item':true,
                        'active-item':activeType==index,
                    }"
                    v-for="(item,index) in typeOption"
                    :key="index"
                    @click="activeType = index">
                    {{item.label}}
                </div>
            </MyTabsSlot>
            <el-table
                v-loading="loading" 
                :data="dataList">
                <el-table-column
                    type="index"
                    :index="index => index + 1 + (pageParams.page - 1) * pageParams.size"
                    width="50"
                    label="序号"/>
                <el-table-column
                    label="数据类型"
                    prop="isbasic"
                    :show-overflow-tooltip="true"
                    min-width="80">
                    <template slot-scope="scope">
                        {{scope.row.isbasic===0?'临时数据':'基础数据'}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="报告编号"
                    prop="reportNo"
                    :show-overflow-tooltip="true"
                    min-width="150"/>
                <el-table-column
                    label="实验中心编号"
                    prop="conentid"
                    :show-overflow-tooltip="true"
                    min-width="150"/>
                <el-table-column
                    label="报告名称"
                    prop="reportTitle"
                    :show-overflow-tooltip="true"
                    min-width="180"/>
                <el-table-column
                    label="地区"
                    prop="area"
                    :show-overflow-tooltip="true"
                    min-width="150"/>
                <el-table-column
                    label="井号"
                    prop="wellNo"
                    :show-overflow-tooltip="true"
                    min-width="100"/>
                <el-table-column
                    label="层位"
                    prop="horizon"
                    :show-overflow-tooltip="true"
                    min-width="100"/>
                <el-table-column
                    label="样品个数"
                    prop="sampleCount"
                    :show-overflow-tooltip="true"
                    min-width="80"/>
                <el-table-column
                    label="送样单位"
                    prop="sampleCompany"
                    :show-overflow-tooltip="true"
                    min-width="100"/>
                <el-table-column
                    label="检测依据"
                    prop="gist"
                    :show-overflow-tooltip="true"
                    min-width="150"/>
                <el-table-column
                    label="设备编号"
                    prop="deviceNo"
                    :show-overflow-tooltip="true"
                    min-width="100"/>
                <el-table-column
                    label="报告日期"
                    prop="date"
                    :show-overflow-tooltip="true"
                    min-width="150"/>
                <el-table-column
                    label="温度℃"
                    prop="temperature"
                    :show-overflow-tooltip="true"
                    min-width="70"/>
                <el-table-column
                    label="湿度（%RH ）"
                    prop="humidity"
                    :show-overflow-tooltip="true"
                    min-width="120"/>
                <el-table-column
                    fixed="right"
                    label="操作" prop="time" width="110">
                    <template slot-scope="scope">
                        <el-button 
                            type="text"
                            @click="onShowInfo({
                                data:scope.row,
                            })"
                            style="color:#FF7919;">
                            查看
                        </el-button>
                        <el-button 
                            type="text"
                            @click="onDelete(scope.row)"
                            style="color:#E23131;">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                style="text-align: right"
                @current-change="page=>{
                    pageParams.page = page;
                    getDataList();
                }"
                @size-change="size=>{
                    pageParams.size = size;
                    getDataList();
                }"
                :current-page="pageParams.page"
                :page-sizes="[10, 20, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageParams.totalSize"
                :page-count="pageParams.size">
            </el-pagination>
        </div>
        <GasReportEdit
            @success="getDataList"
            ref="GasReportEdit">
        </GasReportEdit>
        <GasReport1Edit
            @success="getDataList"
            ref="GasReport1Edit">
        </GasReport1Edit>
        <WaterReportEdit
            @success="getDataList"
            ref="WaterReportEdit">
        </WaterReportEdit>
        <WaterReport1Edit
            @success="getDataList"
            ref="WaterReport1Edit">
        </WaterReport1Edit>
    </ScrollEl>
</template>
<script>
/*
 报告管理页面
 */
import ScrollEl from "@/components/ScrollEl";
import MyTabsSlot from '@/components/MyTabsSlot';
import UploadReport from '@/components/UploadReport';
import GasReportEdit from './components/GasReportEdit';
import GasReport1Edit from './components/GasReport1Edit';
import WaterReportEdit from './components/WaterReportEdit';
import WaterReport1Edit from './components/WaterReport1Edit';
export default {
    name:'Report',
    components:{
        ScrollEl,MyTabsSlot,
        UploadReport,GasReportEdit,GasReport1Edit,WaterReportEdit,WaterReport1Edit,
    },
    data() {
        this.typeOption = [
            {
                value: 1,
                label: '油气田水分析报告',
            },
            {
                value: 3,
                label: '水中氢、氧同位素分析报告',
            },
            {
                value: 2,
                label: '天然气组成分析报告',
            },
            {
                value: 4,
                label: '天然气组份碳氢氧同位素分析报告',
            },
        ];
        return {
            loading: false,
            activeType:0,
            queryParams: {},
            pageParams: {
                page: 1,
                size: 10,
                totalSize: 0,
            },
            other: {},
            dataList: [],
        };
    },
    watch:{
        activeType(){
            this.getDataList();
        },
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        getDataList() {
            let queryParams = {
                pageNum: this.pageParams.page,
                pageSize: this.pageParams.size,
                data:{
                    reportType:this.typeOption[this.activeType].value,
                    ...this.queryParams,
                },
            };
            this.loading = true;
            this.$Service.post(
                this.$Api.reportList,queryParams,
            ).then(data => {
                data = data.data;
                this.dataList = data.data;
                this.pageParams.page = data.pageNum;
                this.pageParams.size = data.pageSize;
                this.pageParams.totalSize = data.count;
            }).catch(({msg}) => {
                this.$message({
                    type: 'error',
                    message: msg,
                });
            }).finally(() => {
                this.loading = false;
            });
        },
        onUpload(){  //报告上传后的回调
            this.getDataList();
        },
        onShowInfo({data}){  //查看报告详情
            let target;
            switch (data.reportType) {
                case '1':
                    target = this.$refs.WaterReportEdit;
                    break;
                case '3':
                    target = this.$refs.WaterReport1Edit;
                    break;
                case '2':
                    target = this.$refs.GasReportEdit;
                    break;
                case '4':
                    target = this.$refs.GasReport1Edit;
                    break;
            }
            target.initData({
                show:true,
                data,
            });
        },
        onDelete(data){
            this.$confirm('此操作将永久删除该报告, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.$Service.post(
                    this.$Api.reportDelete,
                    data,
                ).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                    this.getDataList();
                }).catch(({msg}) => {
                    this.$message({
                        type: 'error',
                        message: msg,
                    });
                });
            }).catch(() => {
                return;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.report-container {
    width: 100%;
    height: fit-content;
    max-height: 100%;
    box-sizing: border-box;
    >.content-container{
        padding: 3rem;
        border-radius: 8px;
        border: 2px solid var(--border-color-2);
        background: linear-gradient(180deg, #031F37 0%, #03316C 100%);
        box-shadow: inset 0px 0px 15px #1b60cc;
        >.top-container{
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            /deep/.upload{
                height: 40px;
                >*{
                    height: 40px;
                }
            }
            /deep/.el-form{
                .el-form-item__label{
                    color:var(--font-color);
                }
            }
            /deep/input{
                background-color: rgba(255, 255, 255, 0.38);
                border-color: rgba(255, 255, 255, 0.38);
                color: white;
            }
        }
        >.type-list{
            width:fit-content;
            background-color: rgba(255, 255, 255, 0.38);
            --my-tabs-padding:0px;
            margin-top: 1rem;
            height: 40px;
            .item{
                padding: 10px;
                font-size: 15px;
                color: #fff;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .active-item{
                color: #ffffff;
                font-weight: bold;
            }
            /deep/.my-tabs-active-item-bg{
                background-color: #1E36D4;
            }
        }
        /deep/.el-table{
            background-color: #00000000;
            margin-top: 2rem;
            border-radius: 7px;
            border: 1px solid var(--border-color-2);
            &::before {
                display: none;
            }
            .el-loading-mask{
                background-color: rgba(0, 0, 0, 0.508);
            }
            tr{
                background-color: #00000000;
                &:hover{
                    td{
                        background-color: #00000072 !important;
                    }
                }
            }
            th{
                background-color: #00000072;
                color: #c2c2c2;
                border-color: var(--border-color-2) !important;
            }
            td{
                border-color: var(--border-color-2) !important;
                color: var(--font-color);
            }
            .el-table__fixed-right{
                background-color: rgb(32, 44, 55) !important;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.651);
                &::before{
                    display: none;
                }
            }
            .el-table__cell{
                background-color: #04040400;
            }
        }
        .el-pagination {
            margin-top: 30px;
        }
    }
}
</style>
